<template>
  <div id="app">
    <v-table-designer ref="vfDesigner"  :banned-widgets="testBanned"
                   :designer-config="designerConfig">
    </v-table-designer>
  </div>
</template>

<script setup>
    import { ref, reactive } from 'vue'
    import { ElMessage } from 'element-plus'

    const vfDesigner = ref(null)
    const fieldListApi = reactive({
      URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
      labelKey: 'fieldLabel',
      nameKey: 'fieldName'
    })
    const testBanned = ref([
      'sub-form',
      'alert',
      'table', 'rate', 'switch','tab'
    ])
    const designerConfig = reactive({
      languageMenu: false,
      //externalLink: false,
      formTemplates: false,
      //eventCollapse: false,
      clearDesignerButton: false,
      importJsonButton:false,
      exportJsonButton: false,
      exportCodeButton: false,
      generateSFCButton: false,
      logoHeader:false
      //previewFormButton: false,

      //presetCssCode: '.abc { font-size: 16px; }',
    })

    const saveFormJson = () => {
      let formJson = vfDesigner.value.getFormJson()
      //TODO: 将formJson提交给后端保存接口，需自行实现！！
      console.log(formJson);
      alert(formJson);
      ElMessage.success('表单已保存！')
    }
</script>

<style lang="scss" scoped>
  #app {
    height: 100%;
  }
  #app .main-container {
    min-height: 100%;
    transition: margin-left 0.28s;
    margin-left: 0px;
    position: relative;
  }

  #app .widget-panel-header ul {
    list-style: none;
    margin-left: 50px;
  }

  #app  :deep(ul) > li {
    display: inline;
    line-height: 40px;
    float:left
  }

</style>